﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购买人次票</title>
    <link rel="stylesheet" href="css/mui.min.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/common.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/mui.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <style>
        * {
            margin: 0;
            border: 0;
            padding: 0;
        }

        body {
            /*font-family: FZLTHJW ;*/
            /*font-family: 微软雅黑;*/
            background: #f8f8f8;
        }

        .vult_01 {
            width: 100%;
            text-align: center;
            font-size: 1.9rem;
            border-bottom: 1px solid #d3d3d3;
            background: #ffffff;
            position: fixed;
            z-index: 9999999;
            top: 0;
            left: 0;
            height: 5.5rem;
            line-height: 5.5rem;
        }

        .vult_02 {
            width: 100%;
            padding: 2% 2%;
            border-bottom: 1px solid #d3d3d3;
            background: #ffffff;
        }

        .vult2_li1 {
            padding-left: 2%;
            font-size: 1.4rem;
            text-align: center;
        }

        .vult2_u1 {
            position: absolute;
            width: 20%;
            margin-top: 1%;
            display: none;
            list-style: none;
            background: #fff;
            z-index: 99;
        }

        .vult2_s1 {
            font-size: 1.4rem;
            color: #f8a94c;
            display: block;
            float: left;
            width: 65%;
            text-align: center;
        }

        .vult2_i1 {
            width: 20%;
            display: block;
            float: left;
            margin-top: 1.5%;
        }

        .vult2_d1 {
            overflow: auto;
            width: 90%;
            margin: 0 auto;
            margin-top: 6%;
        }

        .vult2_d3 {
            width: 25%;
            float: left;
        }

        .vult2_d4 {
            width: 60%;
            float: left;
            height: 3.3rem;
        }

        .vult2_d2 {
            overflow: hidden;
        }

        .vult2_it1 {
            font-size: 1rem;
            width: 80%;
            background: #f0f0f0;
            height: 1.6rem;
            outline: none;
            padding-left: 10px;
            line-height: 1.6rem;
            margin-top: 1%;
        }

        .vult2_i2 {
            width: 10%;
            display: block;
            float: left;
            margin-top: 2%;
        }

        .vult_03 {
            background: #f8f8f8;
            width: 100%;
            overflow: hidden;
        }

        .vult3_d1 {
            width: 100%;
            padding: 4% 3%;
            background: #fff;
            position: relative;
            border-bottom: 1px solid #efefef;
            overflow: hidden;
        }

        .vult3_s1 {
            display: block;
            font-size: 1.6rem;
            margin-bottom: 3%;
            margin-top: 1%;
        }

        .vult3_s2 {
            display: block;
            font-size: 1.4rem;
            color: #8a8a8a;
            margin-bottom: 3%;
        }

        .vult3_s3 {
            font-size: 1.5rem;
            color: #f5556f;
            line-height: 2rem;
        }

        .vult3_s4 {
            font-size: 1.4rem;
            color: #6b708a;
        }

        .vult3_s5 {
            font-size: 1.4rem;
            color: #fff;
            background: #f8a94c;
            padding: 0.2% 1%;
            border-radius: 3px;
            margin-right: 1%;
        }

        .vult3_s6 {
            color: #6cccff;
            font-size: 1.6rem;
            position: absolute;
            right: 5%;
            top: 40%;
        }

        .vult_04 {
            position: fixed;
            width: 100%;
            z-index: 9999999;
            border-top: 1px solid #d3d3d3;
            background: #ffffff;
            bottom: 0;
            height: 6rem;
        }

        .vult4_i1 {
            display: block;
            width: 0.1rem;
            float: left;
        }

        .vult4_d1 {
            width: 49%;
            float: left;
            margin-right: 1%;
        }

        .vult4_d2 {
            width: 49%;
            float: right;
        }

        .vult4_i2 {
            width: 14%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        .vult4_i3 {
            width: 12%;
            margin: 0 auto;
            display: block;
            margin-top: 2%;
        }

        body {
            background: #fafafa;
        }

        .other_vlt2_i1 {
            transform: rotate(180deg);
        }

        .vult2_d1_other {
            display: block;
        }

        .vult3_i1 {
            display: block;
            float: left;
            width: 39%;
            margin-right: 5%;
        }

        .vult4_s1 {
            color: #0bc886;
            font-size: 1.6rem;
            display: block;
            text-align: center;
            margin-top: 3%;
        }
    </style>
    <script>
        $(function () {
            $('.vult2_d1').click(function () {
                $('.vult2_i1').toggleClass('other_vlt2_i1');
                $('.vult2_u1').toggleClass('vult2_d1_other');
            });
        })
        window.onload = function () {
            setInterval(function () {
                $(".vult4_i1").css('height', $('.vult4_d1').css('height'));
                $('.vult_02').css('margin-top', $('.vult_01').css('height'));
                $('.vult_03').css('margin-bottom', $('.vult_04').css('height'));
            }, 16);
        }
    </script>
</head>
<body>
    <div id="Allbody" v-cloak>
        <div class="vult_01">
            购买人次票
        </div>
        <div class="vult_02">
            <div class="vult2_d2">
                <!--<div class="vult2_d3" id="vult2_val1">
                    <div class="vult2_d1">
                        <span class="vult2_s1">{{sportName}}</span><img src="images/vult02.png" alt="" class="vult2_i1">
                    </div>
                    <ul class="vult2_u1 am-menu-nav am-avg-sm-3" style="width: 100%;margin-top: 4%;">
                        <li class="am-parent">
                            <ul class="am-menu-sub am-collapse  am-avg-sm-4 " style="list-style: none">
                                <li style="text-align: center;margin-bottom: 2%;width: 25%;float: left" class="vult2_li1" v-for="(sport,index) in sportList" v-on:click="change(index)">
                                    <img style="width: 50%;display: block; margin: 0 auto;margin-bottom: 4%;" v-bind:src="sport.Icon">{{sport.Name}}
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>-->
                <!--<div class="vult2_d4">
                    <div class="mui-input-row mui-search">
                        <input type="search" style="background: #fafafa;font-size: 1.4rem" v-model="keyword" class="mui-input-clear" placeholder="输入场馆名称">
                    </div>
                </div>
                <button style="float: right; width: 15%;" v-on:click="seach">搜索</button>-->
            </div>
        </div>
        <div class="vult_03">
            <div class="vult3_d1">
                <span class="vult3_s1">{{Ticket.Name}}</span>
                <span class="vult3_s2">{{Ticket.Pirce}}元/张</span>
                <span class="vult3_s2">{{Sport.Name}}</span>
            </div>
        </div>
        <div class="vult2_d4">
            <div class="mui-input-row mui-search">
                <input type="number" style="background: #fafafa;font-size: 1.4rem" v-model="number" v-on:input="changeinput()" class="mui-input-clear" placeholder="输入购买张数">
            </div>
        </div>
        <div>{{money}}元</div>
        <button style="float: right; width: 15%;" v-on:click="buy">购买</button>
    </div>
</body>
</html>
<script src="js/zishiying.js"></script>

<script>
    var Allbody = new Vue({
        el: '#Allbody',
        data: {
            TicketgId: "",//人次票gid
            number: "",//购买张数
            Ticket: [],//当前人次票信息
            Sport: [],//人次票体育种类
            money:0,
            //model:''
        },
        methods: {
            getInfo: function () {
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: window.apiUrl + '/Api/Field/TicketInfo',
                    data: { "TicketgId": that.TicketgId },
                    success: function (data) {
                        console.log(data);
                        
                        if (data.errcode == 0) {
                            that.Ticket = data.data.TicketInfo.o;
                            that.Sport = data.data.TicketInfo.Sport;
                        } else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })
            },
            changeinput: function () {
                var that = this;
                that.money = that.number * that.Ticket.Pirce;
            },
            buy: function () {
                var that = this;
                //console.log(that.number +","+ that.TicketgId)
                //return false;
                $.ajax({
                    type: 'POST',
                    url: apiUrl + '/Api/Field/createTicket',
                    data: { "TicketgId": that.TicketgId, "number": that.number },
                    success: function (data) {
                        if (data.errcode == 0) {
                            //console.log(data.data.Id);
                            location.replace("TicketOrderInfo.html?TicketgId=" + data.data.TicketgId);
                        }
                        else {
                            alert(data.errmsg);
                        }
                    },
                    //error: function () {
                    //    alert("服务器加载异常");
                    //}
                })

            }
        },
    });

    $(function () {
        var TicketgId = $.getParam("TicketgId");
        Allbody.TicketgId = TicketgId;
        Allbody.getInfo();
    })
</script>
